<template>

    <view class="com-search feat-grid">
      <scroll-view scroll-y="true" style="height: 1100rpx;padding-bottom: 20rpx">
        <view class="com-search-input">
          <uv-search input-align="left" height="70" v-model="formState.search.val" :show-action="false"></uv-search>
        </view>

        <view class="">
          <view class="com-search-condition">
            <view class="com-search-condition-label">人数</view>
            <view class="com-search-condition-item fx-row-s">
              <view v-for="(item,index) in play.testScriptList.personList" class="com-search-condition-item-list"
                    :class="tagColor({type:'personObj',currentIndex:index})"
                    @click="handleSelect({type:'personObj',currentIndex:index,item})"
              >
                {{item.name}}
              </view>
            </view>
          </view>

          <view class="com-search-condition">
            <view class="com-search-condition-label">时长</view>
            <view class="com-search-condition-item fx-row-s">
              <view v-for="(item,index) in play.testScriptList.timeList" class="com-search-condition-item-list"
                    :class="tagColor({type:'timeObj',currentIndex:index})"
                    @click="handleSelect({type:'timeObj',currentIndex:index,item})"
              >
                {{ item.name }}
              </view>
            </view>
          </view>

          <view class="com-search-condition">
            <view class="com-search-condition-label">年代</view>
            <view class="com-search-condition-item fx-row-s">
              <view v-for="(item,index) in renderState.yearsList" class="com-search-condition-item-list"
                    :class="{'active-list' : isActive(item,'yearsObj')}"
                    @click="handleLabel(item,'yearsObj')"
              >
                {{ item.name }}
              </view>
            </view>
          </view>

          <view class="com-search-condition">
            <view class="com-search-condition-label">类型</view>
            <view class="com-search-condition-item fx-row-s">
              <view v-for="(item,index) in renderState.typeList" class="com-search-condition-item-list"
                    :class="{'active-list' : isActive(item,'typeObj')}"
                    @click="handleLabel(item,'typeObj')"
              >
                {{ item.name }}
              </view>
            </view>
          </view>
        </view>

      </scroll-view>

      <view class="com-search-op fx-row-b">
        <button @click="handleSub('cancel')" class="com-search-op-cancel">取消</button>
        <button @click="handleSub('confirm')" class="com-search-op-confirm">确定</button>
      </view>

    </view>

</template>
<script setup>
import {ref, reactive,computed,toRefs,watch} from 'vue';
import { header,play } from '@/enums/constants';
import playApi from "@/apis/play";
import { onShow,onHide } from "@dcloudio/uni-app";
const {width , height} = {...header.middle};
const props = defineProps({
  fun:Function,
  formState:{
    type:Object,
    default:{
      search: {val:''},
      personObj:{name:'不限',val:'',currentIndex:0},
      timeObj:{name:'全部',val:'',currentIndex:0},
      yearsObj:[
        {name:'全部', val:''},
      ],
      typeObj:[
        {name:'全部', val:''},
      ]
    }
  }
});
const renderState = reactive({
  yearsList:[{name:'全部', val:''}],
  typeList:[{name:'全部', val:''}],
});

const formState = reactive(JSON.parse(JSON.stringify(props.formState)))

watch(()=>props.formState, (newValue, oldValue) => {
  console.log('show');
  Object.assign(formState,JSON.parse(JSON.stringify(props.formState)))
},{deep:true})


//点击单个标签（前三个类别）
const handleSelect = (para)=>{
  let {type,currentIndex,item} = {...para}
  formState[type].currentIndex = currentIndex;
  formState[type].name = item.name;
  formState[type].val = item.val;
}
const tagColor = computed(()=>{
  return (para)=>{
    if(formState[para.type].currentIndex == para.currentIndex){
      return 'active-list';
    }else{
      return '';
    }
  }
})


//获取年代标签
const handleGetLabelAge = ()=>{
  playApi.getLabelAge().then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      let arr = res.data.map((item)=>{
        return {
          name:item.name,
          val:item.id
        }
      })
      renderState.yearsList =  renderState.yearsList.concat(arr);
    }
  })
}


//获取类型标签
const handleGetLabelTag = ()=>{
  playApi.getTypeTag().then(res=>{
    if(res.code == 'SUCCESS' && res.data){
      let arr = res.data.map((item)=>{
        return {
          name:item.name,
          val:item.id
        }
      })
      renderState.typeList =  renderState.typeList.concat(arr);
    }
  })
}

handleGetLabelAge();
handleGetLabelTag();



//点击多个标签(typeObj,yearsObj)选择
const handleLabel = (obj,type)=>{
  //如果点击全部
  if(obj.val == ''){
    formState[type] = [{name:'全部', val:''}]
  }else{
    let isDel = false;

    for(let key of formState[type].keys()){
      //点击已经选过的标签则删除自己
      if(formState[type][key]?.val == obj.val){
        formState[type].splice(key,1);
        isDel = true;
      }
      //处理完判断是否总数为0，默认选定全部状态 总数不为0就要删除全部的选中状态
      if(formState[type].length<=0){
        formState[type].push({name:'全部', val:''});
      }else if(formState[type][key]?.val == ''){
        formState[type].splice(key,1);
      }
    }


    if(isDel){return}
    formState[type].push(obj);
  }
}

//选中标签(多个)样式
const isActive = computed(()=>{
  return function(obj,type){
    //return formState.typeObj.includes(val);
    let isTrue = formState[type].some((item,index)=>{
      return item.val == obj.val;
    })
    return isTrue;
  }
})


//确定选择
const handleSub=(type)=>{
  //过滤(typeObj)为空的数据
  /*for(let key of formState.typeObj.keys()){
    if(formState.typeObj[key]?.val == ''){
      formState.typeObj.splice(key,1);
    }
  }
  for(let key of formState.yearsObj.keys()){
    if(formState.yearsObj[key]?.val == ''){
      formState.yearsObj.splice(key,1);
    }
  }*/
  let d = JSON.parse(JSON.stringify(formState))
  props.fun(type,d);
}


</script>

<style lang="scss" scoped>
.com-search{
  background-color: $main-text-e;
  &-input{padding: 20rpx;}
  &-condition{
    padding:0 20rpx;
    margin-bottom:30rpx;
    &-label{
      padding-left: 10rpx;
      font-weight: 500;
      margin-bottom: 10rpx;
    }
    &-item{
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      .active-list{
        background-color:$main-e;
        color:$main-text-e;
      }
      &-list{
        @include main-text4;
        margin: 10rpx;
        width:22%;
        border-radius: 15rpx;
        line-height:2.4;
        background-color: #fff;
        color:$main-text-a;
        text-align: center;
      }
    }
  }



  &-op{
    position: relative;
    background-color: $main-text-e;
    &-cancel,&-confirm{
      width: 50%;
      border-radius: 0;
      padding:0 20rpx;
      line-height: 3; &:after{border-radius:0px;border:none;}
    }
    &-cancel{background-color:#fff;color:$main-text-a;}
    &-confirm{background-color:#fff;color:$main-a; }
    &:after{
      position: absolute;
      content: "";
      height: 80%;
      width: .5px;
      left:50%;
      background-color: $main-text-d;
    }
  }
}
</style>
